<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script src="jquery-1.11.2.min.js"></script>

    <style>
        body{
            padding: 0px;
            margin: 0px;
        }
        div{
            float: left;
            margin-left: 10px;
        }
       .bigger{
           border: dashed 5px #808080;
           width: 200px;
           height: 200px;
       }
        .small{
            border: dashed 2px #000033;
            width: 50px;
            height: 50px;
        }
        .normal{
            border: solid 2px #a4115f;
            width: 100px;
            height: 100px;
        }
        table{
            border: solid 2px #0000ff;
            width: 500px;
        }
        td{
            border: solid 2px #a4115f;
            line-height: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $("#btn1").click(function(){
                $("body > div").css("background","red");
            })
            $("#btn2").click(function(){
                $(".bigger + div").css("background","blue");
            });
            $("#btn3").click(function(){
                $("div ~ span").css("background","yellow");
            });
            $("#btn4").click(function(){
                $("body span").css("background","red");
            });
            $("#btn5").click(function(){
                $("[name='username']").css("background","red");
            });
            $("#btn6").click(function(){
                $("[name]").css("background","red");
            });
            $("#btn7").click(function(){
                $("[name*='user']").css("background","red");
            });
            $("#btn9").click(function(){
                $("tr:first").css("background","red");
            });
            $("#btn10").click(function(){
                $("tr:last").css("background","red");
            });
            $("#btn11").click(function(){
                $("tr:even").css("background","red");
            });
        });
    </script>
</head>
<body>
    <h1>层次选择器</h1>

    <p>
        <button id="btn1">选择body下的直接div节点</button>
        <button id="btn2">选择bigger的兄弟节点</button>
        <button id="btn3">选择div的兄弟节点</button>
        <button id="btn4">选择body下所有的span节点</button>
    </p>
    <h1>属性选择器</h1>
    <p>
        <button id="btn5">选择[name='username']的元素</button>
        <button id="btn6">选择带有name属性的元素[name]</button>
        <button id="btn7">选择带有name属性值以包含[name*='user']字符的元素</button>
    </p>
    <h1>基础过滤器</h1>
    <p>
        <button id="btn9">选择第一个元素:first</button>
        <button id="btn10">选择最后一个元素:last</button>
        <button id="btn11">选择偶数元素:even(从0开始)</button>
    </p>
    <div class="bigger">class=bigger
        <div class="normal">class=normal
            <div class="small">class=small</div>
        </div>
    </div>
    <div class="bigger">兄弟节点</div>
    <span class="bigger">span节点</span>
    <p style="clear: both">属性选择</p>
    <form>
        用户名：<input type="text" name="username" value="1">
        <br/>
        密码:<input type="text" name="password" value="2">
        <br/>
        email：<input type="email" name="username" value="my@163.com">
    </form>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</body>
</html>